<template>
  <el-dialog
    v-el-drag-dialog
    title="库存明细"
    :visible.sync="visible"
    width="1024px"
  >
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { queryWarehouseDetailList } from '@/api'
  import { parseTime } from '@/utils'

  export default {
    name: 'Detail',
    data() {
      return {
        visible: false,
        storeId: '',
        tableData: {
          total: 0,
          data: [],
          column: [
            {
              prop: 'storeCode',
              label: '仓库编码'
            },
            {
              prop: 'storeName',
              label: '仓库名称',
              width: 120
            },
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 150
            },
            {
              prop: 'goodsSpec',
              label: '规格型号'
            },
            {
              prop: 'gdStatus',
              label: '状态',
              render: (h, { row }) => {
                if (row.gdStatus === 1) {
                  return <span>重瓶</span>
                } else if (row.gdStatus === 2) {
                  return <span>轻瓶</span>
                } else if (row.gdStatus === 3) {
                  return <span>回收瓶</span>
                } else if (row.gdStatus === 4) {
                  return <span>故障瓶</span>
                } else if (row.gdStatus === 5) {
                  return <span>已损坏</span>
                } else {
                  return <span>正常</span>
                }
              }
            },
            {
              prop: 'gdCount',
              align: 'right',
              label: '库存数量',
              render: (h, { row }) => <span>{ row.gdCount || 0 }</span>
            },
            {
              prop: 'goodsSN',
              label: '钢瓶编码'
            },
            {
              prop: 'goodsSN1',
              label: '芯片编码'
            },
            {
              prop: 'createTime',
              label: '入库时间',
              width: 160,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ]
        }
      }
    },
    methods: {
      open(temp) {
        this.storeId = temp.storeId
        this.fetchData()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp, {
              address: [temp.provinceCode, temp.cityCode, temp.countyCode, temp.streetCode]
            })
            this.type = 'edit'
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          storeId: this.storeId,
          currentPage,
          pageSize
        }
        const res = await queryWarehouseDetailList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
